//const { g } = require("jointjs");

$(function() {

    var namespace = joint.shapes;

    var graph = new joint.dia.Graph({}, { cellNamespace: namespace });

    new joint.dia.Paper({
        el: document.getElementById('myholder'),
        model: graph,
        width: 600,
        height: 600,
        gridSize: 5,
        drawGrid:true,
        cellViewNamespace: namespace
    });

    var rect = new joint.shapes.standard.Rectangle();
    rect.position(100, 30);
    rect.resize(100, 40);
    rect.attr({
        body: {
            fill: 'blue'
        },
        label: {
            text: 'Hello',
            fill: 'white'
        }
    });
    rect.addTo(graph);

    // for(let i=0;i<1000;i++){
    //     let re=new joint.shapes.standard.Rectangle();
    //     re.position(i,i);
    //     re.resize(50,50);
    //     re.addTo(graph);
    // }
    // var cells=[];
    // for(let i=0;i<10000;i++){
    //     var li=new joint.shapes.standard.Link();
    //     li.source(new g.Point(10,i*2));
    //     li.target(new g.Point(200,i*2));
    //     //li.addTo(graph);
    //     cells.push(li);
    // }
    // graph.addCells(cells);

    var rect2 = rect.clone();
    rect2.translate(300, 0);
    rect2.attr('label/text', 'World!');
    rect2.addTo(graph);

    var link = new joint.shapes.standard.Link();
    link.source(rect);
    link.target(rect2);
    link.addTo(graph);
}());